<template>
	<view class="wapper">
		<view class="form-con">
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					船舶名称
				</view>
				<view class="value" @click="showOli = true">
					<text :class="form.boatName?'text':''"> {{form.boatName || '请选择'}}</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					保养类型
				</view>
				<view class="value" @click="showFixType = true">
					<text :class="form.maintainTypeName?'text':''"> {{form.maintainTypeName || '请选择'}}</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					计划保养时间
				</view>
				<view class="value" @click="showTimePicker">
					<text :class="form.planTime.length>0?'text':''">
						<template v-if="form.planTime.length>0">
							{{form.planTime[0]}}~{{form.planTime[1]}}
						</template>
						<template v-else>请选择</template>
					</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list-none">
				<view class="name">
					<text class="red">
						*
					</text>保养内容
				</view>
			</view>
			<view class="table">
				<view class="list-list" v-if="projectList && projectList.length>0">
					<view class="list-item">
						<view class="item-index">序号</view>
						<view class="item-name">保养设备</view>
						<view class="item-content">保养项目</view>
						<view class="item-handle">操作</view>
					</view>
					<view class="list-item" v-for="(item, index) in projectList" :key="index">
						<view class="item-index">{{index+1}}</view>
						<view class="item-name">{{item.equipmentName}}</view>
						<view class="item-content" v-html="item.content.replace(/\n/g,'<br/>')">
						</view>
						<view class="item-handle">
							<u-icon name="minus-circle-fill" color="#ff654e" size="48rpx" @click="handleDelete(index)">
							</u-icon>
						</view>
						<view class="clearfix"></view>
					</view>
				</view>
			</view>
			<view class="add-project" @click="handleNew">
				<image src="../../static/image/detail/add-icon.png"></image>添加保养内容
			</view>

			<view class="item-list-none">
				<view class="name">
					保养备注
				</view>
			</view>
			<view class="text-area">
				<textarea v-model="form.remark" placeholder="请输入（非必填）"></textarea>
			</view>
		</view>
		<view class="footer" @click="newSubmit">
			提交
		</view>
		<u-action-sheet :safeAreaInsetBottom="true" @select="selectClick" title="请选择维修类型" @close="showFixType = false"
			:actions="maintainTypeOption" :show="showFixType">
		</u-action-sheet>
		<changeBoat @closeOli="closeOli" @changeItem="changeItem" :showOli="showOli"></changeBoat>
		<!-- <changeProject @closeFix="closeFix" @changeItem="changeFixItem" :showFixPro="showFixPro"></changeProject> -->
		<term-picker :visable.sync="timeShow" :minYear="1900" :timeLimit="false" :deferYear="30" themeColor="#407FFF"
			startText="开始时间" endText="结束时间" @confirm="confirm">
		</term-picker>
		<u-modal :show="showConfirm" @cancel="showConfirm=false" @confirm="handleConfirmDelete" :showCancelButton="true"
			title="提示" content='是否确认删除?'></u-modal>
	</view>
</template>

<script>
	import changeBoat from '@/components/changeBoat/index.vue'
	import termPicker from '@/components/term-picker/term-picker.vue'
	import {
		addWorkOrder,
		queryLastProjects
	}
	from '@/api/maintain.js'

	export default {
		components: {
			changeBoat,
			termPicker

		},
		data() {
			return {
				showOli: false,
				showFixType: false,
				showFixPro: false,
				timeShow: false,
				showConfirm: false,
				deleteIndex: null,
				maintainTypeOption: [{
						name: '日常保养',
						type: '1'
					},
					{
						name: '月度保养',
						type: '2'
					},
					{
						name: '季度保养',
						type: '3'
					},
					{
						name: '年度保养',
						type: '4'
					}
				],
				projectList: [],
				checkProject: [],
				open: false,
				search: '',
				// 表单参数
				form: {
					maintainType: null,
					boatId: '',
					projectIdList: [],
					boatName: '',
					maintainTypeName: '日常保养',
					remark: '',
					planStartTime: '',
					planEndTime: '',
					planTime: [],
				},
				params: {
					year: true,
					month: true,
					day: true
				},
				loading: false,
			}
		},
		created() {

		},
		onLoad(option) {
			this.form.boatId = option.boatId || ''
			this.form.boatName = option.boatName || ''
			this.form.maintainTypeName = option.maintainTypeName || ''
			if (this.form.maintainTypeName) {
				switch (this.form.maintainTypeName) {
					case '日常保养':
						this.form.maintainType = 1
						break;
					case '月度保养':
						this.form.maintainType = 2
						break;
					case '季度保养':
						this.form.maintainType = 3
						break;
					case '年度保养':
						this.form.maintainType = 4
						break;
					default:
						break;
				}
			}
		},
		methods: {
			handleDelete(index) {
				this.deleteIndex = index
				this.showConfirm = true
				// const self = this
				// self.projectList.splice(index, 1)
				// self.form.projectIdList.splice(index, 1)
				// this.$confirm('是否确认删除?', '提示', {
				// 	confirmButtonText: '确定',
				// 	cancelButtonText: '取消',
				// 	type: 'warning'
				// }).then(function() {
				// 	self.projectList.splice(index, 1)
				// 	self.form.projectIdList.splice(index, 1)
				// }).catch(() => {})

			},
			handleConfirmDelete() {
				const self = this
				self.projectList.splice(this.deleteIndex, 1)
				self.form.projectIdList.splice(this.deleteIndex, 1)
				self.showConfirm = false
			},

			showTimePicker() {
				this.timeShow = true
			},
			confirm(date) {
				this.form.planTime = date
				this.form.planStartTime = date[0]
				this.form.planEndTime = date[1]

				console.log(date) // ['2021-06-01', '2021-07-01']
			},
			closeOli() {

				this.showOli = false
			},
			changeItem(item) {
				this.form.boatId = item.boatId
				this.form.boatName = item.boatName
				this.showOli = false
				if(this.form.maintainType){
					this.getPro()
				}

			},
			getPro() {
				if (this.form.boatId) {
					const req = {
						boatId: this.form.boatId,
						maintainType: this.form.maintainType
					}
					queryLastProjects(req).then(res => {
						const {
							data
						} = res
						this.projectList = data || []
						let newArr = []
						if (data && data.length > 0) {
							for (let i = 0; i < data.length; i++) {
								newArr.push(data[i].projectId)
							}
						}
						const projectIdListArr = [...this.form.projectIdList, ...newArr]

						this.form.projectIdList = [...new Set(projectIdListArr)]

					})
				}

			},
			selectClick(item) {
				this.form.maintainType = item.type
				this.form.maintainTypeName = item.name
				this.showFixType = false
				if(this.form.boatId){
					this.getPro()
				}
				
			},

			changeFixItem(item) {
				// this.form.boatId = item.boatId
				// this.form.boatName = item.boatName
				this.showFixPro = false
			},
			getDetail() {
				const id = this.id
				getWorkOrderDetail({
					id
				}).then(response => {
					this.form = response.data
				})
			},
			handleNew() {
				uni.navigateTo({
					url: '/subMaintenance/changeProject/index?maintainType=' + this.form.maintainType
				})
			},
			changeProject(projectList, newArr) {
				const projectListArr = [...this.projectList, ...projectList]
				const projectIdListArr = [...this.form.projectIdList, ...newArr]
				this.projectList = this.deWeight(projectListArr)
				this.form.projectIdList = [...new Set(projectIdListArr)]
			},
			deWeight(arr) {
				for (var i = 0; i < arr.length - 1; i++) {
					for (var j = i + 1; j < arr.length; j++) {
						if (arr[i].projectId == arr[j].projectId) {
							arr.splice(j, 1)
							//因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
							j--
						}
					}
				}
				return arr
			},
			/** 提交按钮 */
			newSubmit() {
				if (this.loading) {
					return
				}
				if (!this.form.boatId) {
					uni.showToast({
						icon: 'none',
						title: '请选择船舶',
						duration: 3000,
					})
					return
				}
				if (!this.form.maintainType) {
					uni.showToast({
						icon: 'none',
						title: '请选择保养类型',
						duration: 3000,
					})
					return
				}
				if (this.form.planTime.length===0) {
					uni.showToast({
						icon: 'none',
						title: '计划保养时间不能为空',
						duration: 3000,
					})
					return
				}
				 
				if (this.form.projectIdList.length===0) {
					uni.showToast({
						icon: 'none',
						title: '保养内容不能为空',
						duration: 3000,
					})
					return
				}
				uni.showLoading({
					mask: true,
					title: '加载中',
				})
				this.loading = true
				addWorkOrder(this.form).then(response => {
					if (response.code === 200) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '保存成功',
							duration: 2000,
						})
						setTimeout(() => {
							this.loading = false
							uni.hideLoading()
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					} else {
						this.loading = false
						uni.hideLoading()
					}

				}).finally(() => {

				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		background: #F5F7F9;
		min-height: 100vh;
		overflow: hidden;
		// padding-bottom: 104rpx;


		.form-con {
			margin-top: 10rpx;
			background: #fff;
			height: calc(100vh - 300 rpx);

			.item-list-none {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;

				.name {
					font-size: 32rpx;
					font-weight: 400;

					.red {
						color: #FF654E;
					}
				}

			}

			.table {
				padding: 0 30rpx;

				.list-list {
					width: 100%;

					.list-item {
						padding: 10rpx 0;
						min-height: 60rpx;
						line-height: 60rpx;
						border-bottom: 1rpx solid #E3E7EE;

						.item-index {
							width: 100rpx;
							float: left;
							text-align: center;

						}

						.item-name,
						.item-content {
							float: left;
							width: calc((100% - 180rpx) / 2);
							height: auto;

						}

						.item-handle {
							float: left;
							text-align: center;
							width: 80rpx;
							display: flex;
							justify-content: center;
							line-height: 80rpx;
							height: auto;

						}

						&:first-child {
							border-bottom: none !important;
							border-top: 1rpx solid #E3E7EE;
						}
					}


				}

			}

			.add-project {
				clear: both;
				padding: 26rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #3685E6;
				border-bottom: 2rpx solid #F5F7F9;

				image {
					width: 48rpx;
					height: 49rpx;
				}
			}

			.text-area {
				margin: 0 30rpx;

				textarea {
					width: 100%;
				}
			}

			.item-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 2rpx solid #F5F7F9;

				.name {
					font-size: 32rpx;
					font-weight: 400;
					margin-right: 20rpx;

					.red {
						color: #FF654E;
					}
				}

				.value {
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
					color: #b3b3b3;
					flex: 1;

					width: 400rpx;
					justify-content: flex-end;


					text {
						margin-right: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.text {
						color: #333;
					}
				}
			}
		}

		.footer {
			width: 686rpx;
			height: 104rpx;
			background: #407FFF;
			border-radius: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: fixed;
			// bottom: 118rpx;
			// left: 38rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin: 38rpx auto;

		}
	}
</style>
